<template>
  <div id="index-c">
    <div class="index-c-bg">
    </div>
    <div class="index-c-char">
        <ul class="index-ul">
            <div class="top-s" style="font-size: 14px;">C项目关键指标达成率</div>
            <div class="set-con">
                <!-- <div :style="fontSizeFun" class="index-l-4-echarts" ref="reachRefOne"></div> -->
                <div class="set-c">
                    <ul class="set-c-u">
                        <li class="set-c-u-img">
                            <img src="../assets/factory-min-2.png" />
                        </li>
                        <li class="set-c-u-c">
                            <div class="set-c-u-con set-c-u-top"><span>人数：</span><p>396</p></div>
                            <div class="set-c-u-con set-c-u-c"><span>线体数：</span><p>1098</p></div>
                            <div class="set-c-u-con"><span>产能数：</span><p>3289</p></div>
                        </li>
                    </ul>
                </div>
            </div>
        </ul>
        <ul class="index-ul">
            <div class="top-s" style="font-size: 14px;">镍氢关键指标达成率</div>
            <div class="set-con">
                <!-- <div :style="fontSizeFun" class="index-l-4-echarts" ref="reachRefTwo"></div> -->
                <div class="set-c">
                    <ul class="set-c-u">
                        <li class="set-c-u-img">
                            <img style="margin-top: -54px;" src="../assets/factory-min-3.png" />
                        </li>
                        <li class="set-c-u-c">
                            <div class="set-c-u-con set-c-u-top"><span>人数：</span><p>334</p></div>
                            <div class="set-c-u-con set-c-u-c"><span>线体数：</span><p>998</p></div>
                            <div class="set-c-u-con"><span>产能数：</span><p>2409</p></div>
                        </li>
                    </ul>
                </div>
            </div>
        </ul>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'index-c',
  data() {
    return {
        
    };
  },
  components: {},
  mounted() {
    let that = this
    that.$nextTick(() => {
        that.fontSizeFun(14)
        // that.initCharts()
        // this.initChartsTwo()
    })
  },
  methods: {
    fontSizeFun(val,initWidth=1920){
        const nowClientWidth = document.documentElement.clientWidth
        return val * (nowClientWidth/initWidth) + 'px'
    },
    // initChartsTwo(){
    //     let myChart = echarts.init(this.$refs.reachRefTwo)
    //     window.addEventListener('resize',() => {
    //         myChart.resize()
    //     })
    //     // let option = {
    //     //     legend: {
    //     //         bottom: 0,
    //     //         textStyle: {
    //     //             color: '#FFFFFF',
    //     //         },
    //     //         icon: 'circle',
    //     //         data: ['FTY达标', 'DT损失','任务完成','产出达成']
    //     //     },
    //     //     radar: {
    //     //         center: ['50%','44%'],
    //     //         radius: 80,
    //     //         indicator: [
    //     //             { name: '', max: 6500 },
    //     //             { name: 'FTY达标', max: 16000 },
    //     //             { name: 'DT损失', max: 30000 },
    //     //             { name: '', max: 38000 },
    //     //             { name: '任务完成', max: 52000 },
    //     //             { name: '产出达成', max: 25000 }
    //     //         ]
    //     //     },
    //     //     series: [
    //     //         {
    //     //             type: 'radar',
    //     //             data: [
    //     //                 {
    //     //                     value: [4200, 3000, 20000, 35000, 50000, 18000],
    //     //                     name: 'FTY达标',
    //     //                 },
    //     //                 {
    //     //                     value: [5000, 14000, 28000, 26000, 42000, 21000],
    //     //                     name: 'DT损失'
    //     //                 },
    //     //                 {
    //     //                     value: [5600, 14600, 26000, 20000, 38000, 18000],
    //     //                     name: '任务完成'
    //     //                 },
    //     //                 {
    //     //                     value: [4500, 13000, 25000, 20000, 40000, 20000],
    //     //                     name: '产出达成',
    //     //                     lineStyle: {
    //     //                         normal: {
    //     //                             color: '#406b2c',
    //     //                         }
    //     //                     },
    //     //                     itemStyle: {
    //     //                         normal: {
    //     //                             color: '#406b2c'
    //     //                         }
    //     //                     }
    //     //                 }
    //     //             ]
    //     //         }
    //     //     ]
    //     // };
    //     // return option && myChart.setOption(option)
    //     let option = {
    //         tooltip : {
    //             trigger: 'axis',
    //             axisPointer: {
    //                 type: 'line',
    //                 label: {
    //                     backgroundColor: '#6a7985'
    //                 }
    //             }
    //         },
    //         legend: {
    //             show: false,
    //             left: '99%',
    //             right: 0,
    //             top: '15%',
    //             orient: 'vertical',
    //             itemGap: 10, 
    //             itemWidth:20,
    //             itemHeight:12
    //         },
    //         grid: {
    //             left: '3%',
    //             right: '15%',
    //             bottom: 0,
    //             top: 10,
    //             containLabel: true,
    //             borderColor: 'rgb(61,61,61)'
    //         },
    //         xAxis: {
    //             type: 'value',
    //             boundaryGap : true,
    //             // position: 'bottom',
    //             axisLine: {
    //                 show: false
    //             },
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLabel: {
    //                 show: false,
    //                 color: "rgba(255,255,255,0.6)",
    //                 margin: 10,
    //             },
    //             splitLine: {
    //                 show: false,
    //                 lineStyle: {
    //                     color: "rgba(255,255,255,0.06)"
    //                 }
    //             }
    //         },
    //         yAxis: {
    //             type: 'category',
    //             data: ['产出达成率', 'DT损失率', 'FTY达成率', '任务完成率'],
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLabel: {
    //                 show: false,
    //                 color: "rgba(255,255,255,1)"
    //             },
    //             axisLine: {
    //                 show: false,
    //             },
    //             splitLine: {
    //                 show: false,
    //                 lineStyle: {
    //                     color: "rgba(255,255,255,0.06)"
    //                 }
    //             },
    //             splitArea:{
    //                 show: false,
    //                 areaStyle:{
    //                     color: 'rgba(255,255,255,0.02)',
    //                 }
    //             },
    //         },
    //         series: [
    //             {
    //                 data: [32, 40, 44, 52],
    //                 type: 'bar',
    //                 showBackground: true,
    //                 backgroundStyle: {
    //                     color: 'rgba(255,255,255,0.1)'
    //                 },
    //                 barWidth:'30%',
    //                 label: {
    //                     show: true,
    //                     position: 'left',
    //                     offset: [],
    //                     formatter: '{c}%',
    //                     textStyle: {
    //                         color: '#14E0FF',
    //                         // fontSize: 14,
    //                     }
    //                 },
    //                 itemStyle: {
    //                     normal: {
    //                         color: new echarts.graphic.LinearGradient( 1, 0, 0, 0,[
    //                             {
    //                                 offset: 0, 
    //                                 color: 'rgba(0,229,255,1)'
    //                             },
    //                             {
    //                                 offset: 1, 
    //                                 color: 'rgba(0,229,255,0)'
    //                             }
    //                         ]),
    //                     }
    //                 },
    //             }
    //         ]
    //     }
    //     myChart.setOption(option)
    //     setTimeout(() => {
    //         let width = myChart.getWidth()
    //         if(width && width !== 0){
    //             let opt = myChart.getOption();
    //             let grid = opt.grid[0];
    //             let right = grid.right;
    //             let left = grid.left;
    //             right = width*parseFloat(right)/100;
    //             left = width*parseFloat(left)/100;
    //             let x = width-left-right;
    //             option.series[0].label.offset = [x + 50,0]
    //         }
    //         return option && myChart.setOption(option)
    //     },200)
    // },

    // initCharts(){
    //     let myChart = echarts.init(this.$refs.reachRefOne)
    //     window.addEventListener('resize',() => {
    //         myChart.resize()
    //     })
        
    //     // const data = [
    //     //     [
    //     //         [28604, 77, 17096869, '任务完成', 1990],
    //     //         [31163, 77.4, 27662440, '任务完成', 1990],
    //     //         [1516, 68, 252847810, '任务完成', 1990],
    //     //         [13670, 74.7, 10582082, '任务完成', 1990],
    //     //         [28599, 75, 4986705, '任务完成', 1990],
    //     //         [29476, 77.1, 56943299, '任务完成', 1990],
    //     //         [31476, 75.4, 78958237, '任务完成', 1990],
    //     //         [28666, 78.1, 254830, '任务完成', 1990],
    //     //         [1777, 57.7, 252847810, '任务完成', 1990],
    //     //         [29550, 79.1, 252847810, '任务完成', 1990],
    //     //         [2076, 67.9, 20194354, '任务完成', 1990],
    //     //         [12087, 72, 42972254, '任务完成', 1990],
    //     //         [24021, 75.4, 3397534, '任务完成', 1990],
    //     //         [43296, 76.8, 4240375, '任务完成', 1990],
    //     //         [10088, 70.8, 38195258, '任务完成', 1990],
    //     //         [19349, 69.6, 147568552, '任务完成', 1990],
    //     //         [10670, 67.3, 53994605, '任务完成', 1990],
    //     //         [26424, 75.7, 57110117, '任务完成', 1990],
    //     //         [37062, 75.4, 252847810, '任务完成', 1990]
    //     //     ],
    //     //     [
    //     //         [44056, 81.8, 23968973, 'FTY达成', 2015],
    //     //         [43294, 81.7, 35939927, 'FTY达成', 2015],
    //     //         [13334, 76.9, 252847810, 'FTY达成', 2015],
    //     //         [21291, 78.5, 11389562, 'FTY达成', 2015],
    //     //         [38923, 80.8, 5503457, 'FTY达成', 2015],
    //     //         [37599, 81.9, 64395345, 'FTY达成', 2015],
    //     //         [44053, 81.1, 80688545, 'FTY达成', 2015],
    //     //         [42182, 82.8, 329425, 'FTY达成', 2015],
    //     //         [5903, 66.8, 252847810, 'FTY达成', 2015],
    //     //         [36162, 83.5, 126573481, 'FTY达成', 2015],
    //     //         [1390, 71.4, 25155317, 'FTY达成', 2015],
    //     //         [34644, 80.7, 50293439, 'FTY达成', 2015],
    //     //         [34186, 80.6, 4528526, 'FTY达成', 2015],
    //     //         [64304, 81.6, 5210967, 'FTY达成', 2015],
    //     //         [24787, 77.3, 38611794, 'FTY达成', 2015],
    //     //         [23038, 73.13, 143456918, 'FTY达成', 2015],
    //     //         [19360, 76.5, 78665830, 'FTY达成', 2015],
    //     //         [38225, 81.4, 64715810, 'FTY达成', 2015],
    //     //         [53354, 79.1, 321773631, 'FTY达成', 2015]
    //     //     ]
    //     // ];
    //     // let option = {
    //     //     legend: {
    //     //         show: false,
    //     //         right: '10%',
    //     //         top: '3%',
    //     //         data: ['1990', '2015']
    //     //     },
    //     //     grid: {
    //     //         left: '3%',
    //     //         right: 40,
    //     //         bottom: 0,
    //     //         top: 20,
    //     //         containLabel: true,
    //     //         borderColor: 'rgb(61,61,61)'
    //     //     },
    //     //     xAxis: {
    //     //         // data: ['1月','2月','3月','4月','5月','6月','7月'],
    //     //         // min: 0,
    //     //         // max: 7,
    //     //         splitLine: {
    //     //             show: false,
    //     //             lineStyle: {
    //     //                 type: 'dashed'
    //     //             }
    //     //         },
    //     //         axisTick: {
    //     //             show: false,
    //     //         },
    //     //         axisLine: {
    //     //             show: true,
    //     //             lineStyle: {
    //     //                 color: 'rgba(255,255,255,0.3)'
    //     //             }
    //     //         },
    //     //         axisLabel: {
    //     //             show: true,
    //     //             color: "rgba(255,255,255,1)",
    //     //             margin: 10,
    //     //         },
    //     //     },
    //     //     yAxis: {
    //     //         splitLine: {
    //     //             show: false,
    //     //             lineStyle: {
    //     //                 type: 'dashed'
    //     //             }
    //     //         },
    //     //         axisTick: {
    //     //             show: false,
    //     //         },
    //     //         axisLine: {
    //     //             show: false,
    //     //         },
    //     //         axisLabel: {
    //     //             show: true,
    //     //             color: "rgba(255,255,255,1)",
    //     //             margin: 10,
    //     //         },
    //     //         scale: true
    //     //     },
    //     //     series: [
    //     //         {
    //     //             data: data[0],
    //     //             type: 'scatter',
    //     //             symbolSize: function (data) {
    //     //                 return Math.sqrt(data[2]) / 5e2;
    //     //             },
    //     //             emphasis: {
    //     //                 focus: 'series',
    //     //                 label: {
    //     //                     show: true,
    //     //                     color: '#FFFFFF',
    //     //                     formatter: function (param) {
    //     //                         return param.data[3];
    //     //                     },
    //     //                     position: 'top'
    //     //                 },
    //     //             },
    //     //             itemStyle: {
    //     //                 shadowBlur: 10,
    //     //                 shadowColor: 'rgba(120, 36, 50, 1)',
    //     //                 shadowOffsetY: 5,
    //     //                 color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
    //     //                     {
    //     //                         offset: 0,
    //     //                         color: 'rgb(251, 118, 123)'
    //     //                     },
    //     //                     {
    //     //                         offset: 1,
    //     //                         color: 'rgb(204, 46, 72)'
    //     //                     }
    //     //                 ])
    //     //             }
    //     //         },
    //     //         {
    //     //             data: data[1],
    //     //             type: 'scatter',
    //     //             symbolSize: function (data) {
    //     //                 return Math.sqrt(data[2]) / 5e2;
    //     //             },
    //     //             emphasis: {
    //     //                 focus: 'series',
    //     //                 label: {
    //     //                     show: true,
    //     //                     color: '#FFFFFF',
    //     //                     formatter: function (param) {
    //     //                         return param.data[3];
    //     //                     },
    //     //                     position: 'top'
    //     //                 }
    //     //             },
    //     //             itemStyle: {
    //     //                 shadowBlur: 10,
    //     //                 shadowColor: 'rgba(25, 100, 150, 1)',
    //     //                 shadowOffsetY: 5,
    //     //                 color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
    //     //                     {
    //     //                         offset: 0,
    //     //                         color: 'rgb(129, 227, 238)'
    //     //                     },
    //     //                     {
    //     //                         offset: 1,
    //     //                         color: 'rgb(25, 183, 207)'
    //     //                     }
    //     //                 ])
    //     //             }
    //     //         }
    //     //     ]
    //     // };
    //     // return option && myChart.setOption(option)

    //     let option = {
    //         tooltip : {
    //             trigger: 'axis',
    //             axisPointer: {
    //                 type: 'line',
    //                 label: {
    //                     backgroundColor: '#6a7985'
    //                 }
    //             }
    //         },
    //         legend: {
    //             show: false,
    //             left: '99%',
    //             right: 0,
    //             top: '15%',
    //             orient: 'vertical',
    //             itemGap: 10, 
    //             itemWidth:20,
    //             itemHeight:12
    //         },
    //         grid: {
    //             left: '3%',
    //             right: '15%',
    //             bottom: 0,
    //             top: 10,
    //             containLabel: true,
    //             borderColor: 'rgb(61,61,61)'
    //         },
    //         xAxis: {
    //             type: 'value',
    //             boundaryGap : true,
    //             // position: 'bottom',
    //             axisLine: {
    //                 show: false
    //             },
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLabel: {
    //                 show: false,
    //                 color: "rgba(255,255,255,0.6)",
    //                 margin: 10,
    //             },
    //             splitLine: {
    //                 show: false,
    //                 lineStyle: {
    //                     color: "rgba(255,255,255,0.06)"
    //                 }
    //             }
    //         },
    //         yAxis: {
    //             type: 'category',
    //             data: ['产出达成率', 'DT损失率', 'FTY达成率', '任务完成率'],
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLabel: {
    //                 show: false,
    //                 color: "rgba(255,255,255,1)"
    //             },
    //             axisLine: {
    //                 show: false,
    //             },
    //             splitLine: {
    //                 show: false,
    //                 lineStyle: {
    //                     color: "rgba(255,255,255,0.06)"
    //                 }
    //             },
    //             splitArea:{
    //                 show: false,
    //                 areaStyle:{
    //                     color: 'rgba(255,255,255,0.02)',
    //                 }
    //             },
    //         },
    //         series: [
    //             {
    //                 data: [40, 50, 55, 62],
    //                 type: 'bar',
    //                 showBackground: true,
    //                 backgroundStyle: {
    //                     color: 'rgba(255,255,255,0.1)'
    //                 },
    //                 barWidth:'30%',
    //                 label: {
    //                     show: true,
    //                     position: 'left',
    //                     offset: [],
    //                     formatter: '{c}%',
    //                     textStyle: {
    //                         color: '#14E0FF',
    //                         // fontSize: 14,
    //                     }
    //                 },
    //                 itemStyle: {
    //                     normal: {
    //                         color: new echarts.graphic.LinearGradient( 1, 0, 0, 0,[
    //                             {
    //                                 offset: 0, 
    //                                 color: 'rgba(0,229,255,1)'
    //                             },
    //                             {
    //                                 offset: 1, 
    //                                 color: 'rgba(0,229,255,0)'
    //                             }
    //                         ]),
    //                     }
    //                 },
    //             }
    //         ]
    //     }
    //     myChart.setOption(option)
    //     setTimeout(() => {
    //         let width = myChart.getWidth()
    //         if(width && width !== 0){
    //             let opt = myChart.getOption();
    //             let grid = opt.grid[0];
    //             let right = grid.right;
    //             let left = grid.left;
    //             right = width*parseFloat(right)/100;
    //             left = width*parseFloat(left)/100;
    //             let x = width-left-right;
    //             option.series[0].label.offset = [x + 50,0]
    //         }
    //         return option && myChart.setOption(option)
    //     },200)
    // },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-track {
    background: rgba($color: #f3f4f9, $alpha: 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba($color:  #c8d2e0, $alpha: 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba($color:   #b4b4b4, $alpha: 0.1);
}
::-webkit-scrollbar-corner {
    background: rgba($color:    #c8d2e0, $alpha: 0.1);
}
// 火狐
* {
    scrollbar-color: #c8d2e0 #f3f4f9;
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* 滚动条宽度有三种：thin、auto、none */
}
.set-con{
    width: 100%;
    height: 78%;
    overflow: hidden;
    .set-c{
        width: 100%;
        .set-c-u{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .set-c-u-img{
                width: 70%;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                    height: auto;
                    margin-top: -36px;
                    filter:opacity(70%);
                }
            }
            .set-c-u-top{
                margin-top: 40px!important;
            }
            .set-c-u-con{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                margin-top: 10px;
                span{
                    display: block;
                    font-weight: 600;
                    font-size: 14px;
                    color: rgb(0, 229, 255);
                    margin-right: 4px;
                }
                p{
                    font-size: 14px;
                }
            }
        }
    }
}
.set-con:hover{
    overflow: hidden;
}
.set-flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#index-c{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    .index-c-bg{
        width: 100%;
        height: 79%;
        background-image: url(./img/cab_bg.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        // border: 1px solid red;
        .index-c-txt{
            width: 100%;
            text-align: center;
            margin-top: 30px;
            display: flex;
            justify-content: center;
            flex-direction: row;
            .index-c-txt-con{
                width: 15%;
                span{
                    width: 100%;
                    display: block;
                    text-align: center;
                }
                .index-c-txt-con-s01{
                    color: #00E5FF;
                    font-size: 24px;
                    font-weight: bold;
                    font-style: italic;
                    i{
                        font-size: 14px;
                    }
                }
                .index-c-txt-con-s02{
                    color: #FFFFFF;
                    font-size: 14px;
                    font-weight: bold;
                    margin-top: 15px;
                }
            }
        }
    }
    .index-c-char{
        width: 100%;
        height: 20%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .index-ul{
            background: rgba($color: #005ABF, $alpha: 0.2);
            // width: 49.7%;
            width: 49.7%;
            height: 100%;
            padding-bottom: 10px;
            .top-s{
                padding: 10px 0 10px 10px;
                font-weight: 600;
                // font-size: 14px;
                font-style: oblique;
                background: rgba($color: #005ABF, $alpha: 0.4);
            }
            .index-l-4-echarts{
                width: 100%;
                height: 100%;
                
            }
        }
    }
}
</style>